<template>
  <!-- 商品评价 -->
  <div class="evaluate">
    <div class="goods-evaluate">
      <div class="comment-head">
        <div class="rate">
          <p class="data">
            <span>
              <i>1033</i>
              人购买
            </span>
            <span>
              <i>98.3%</i>
              好评率
            </span>
          </p>
        </div>
        <div class="tags">
          <dl>
            <dt>大家都在说：</dt>
            <dd>
              <span class="tag-item active">全部评价 (999+)</span>
              <span class="tag-item" v-for="item in 5" :key="item"
                >保暖性好</span
              >
            </dd>
          </dl>
        </div>
      </div>
      <div class="comment-list">
        <div class="sort">
          排序
          <span class="active">最热</span>
          <span>最新</span>
        </div>
        <ul>
          <li v-for="item in 5" :key="item">
            <div class="comment-item">
              <div class="user">
                <img
                  src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/avatar_1.png"
                  alt=""
                />
                <span>兔****m</span>
              </div>
              <div class="body">
                <div class="score">
                  <span v-for="item in 5" :key="item">❤️</span>
                  <span class="attr">颜色：黑色 尺码：M</span>
                </div>
                <div class="text">
                  网易云app上这款耳机非常不错 新人下载网易云购买这款耳机优惠大
                  而且耳机🎧确实正品 音质特别好 戴上这款耳机
                  听音乐看电影效果声音真是太棒了 无线方便 小盒自动充电
                  最主要是质量好音质棒 想要买耳机的放心拍 音效巴巴滴 老棒了
                </div>
                <div class="image">
                  <img
                    v-for="item in 6"
                    :key="item"
                    src="https://yanxuan-item.nosdn.127.net/13b8d8e7da6a36404f2e5cdfa8276082.png"
                    alt=""
                  />
                </div>
                <div class="time">
                  <span> 2020-10-10 10:11:22 </span>
                  <span class="zan"> <i>❤️</i>122 </span>
                </div>
              </div>
            </div>
          </li>
          <!-- 分页 -->
          <Pagination style="padding: 40px"></Pagination>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 分页
import Pagination from '@/views/Member/Collect/Brand/components/pagination.vue';
</script>
<style scoped lang="less">
.evaluate {
  .goods-evaluate {
    min-height: 400px;
    padding-top: 25px;
    .comment-head {
      display: flex;
      .rate {
        width: 340px;
        padding: 0 25px;
        border-right: 1px solid rgb(245, 245, 245);
        .data {
          display: flex;
          justify-content: space-around;
          padding-top: 30px;
          color: rgb(153, 153, 153);
          text-align: center;
          i {
            font-size: 32px;
            color: rgb(207, 68, 68);
            padding-right: 5px;
            display: block;
          }
        }
      }
      .tags {
        flex: 1 1 0%;
        dl {
          display: flex;
          dt {
            width: 110px;
            font-weight: 700;
            line-height: 42px;
          }
          dd {
            flex: 1 1 0%;
            display: flex;
            flex-wrap: wrap;
            .tag-item {
              margin-left: 20px;
              margin-bottom: 20px;
              width: 130px;
              height: 42px;
              border: 1px solid rgb(228, 228, 228);
              text-align: center;
              line-height: 40px;
              border-radius: 4px;
              cursor: pointer;
            }
            .active {
              border-color: rgb(39, 186, 155);
              background: rgb(39, 186, 155);
              color: #fff;
            }
          }
        }
      }
    }
    .comment-list {
      padding: 25px;
    }
    .sort {
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      border-top: 1px solid rgb(245, 245, 245);
      border-bottom: 1px solid rgb(245, 245, 245);
      span {
        padding-left: 40px;
        cursor: pointer;
      }
      .active {
        background-color: rgb(39, 186, 155);
      }
    }
  }
}
.comment-item {
  display: flex;
  padding: 25px 10px;
  border-bottom: 1px solid rgb(245, 245, 245);
  .user {
    width: 160px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    span {
      padding-left: 10px;
      color: rgb(102, 102, 102);
    }
  }
  .body {
    flex: 1 1 0%;
    .score {
      line-height: 40px;
      span {
        color: rgb(255, 146, 64);
        padding-right: 3px;
        font-size: 16px;
      }
      .attr {
        padding-left: 10px;
        color: rgb(102, 102, 102);
      }
    }
    .text {
      color: rgb(102, 102, 102);
      line-height: 24px;
    }
    .image {
      padding-top: 10px;
      img {
        border: 1px solid rgb(228, 228, 228);
        width: 120px;
        height: 120px;
        margin-bottom: 10px;
        margin-right: 10px;
        object-fit: contain;
      }
    }
    .time {
      color: rgb(153, 153, 153);
      display: flex;
      justify-content: space-between;
      .zan {
        cursor: pointer;
        i {
          font-size: 16px;
          color: rgb(153, 153, 153);
        }
      }
    }
  }
}
</style>
